<template>
    <div>
        <h4>pinia</h4>
        <hr>
        <h5 @click="change">State 是允许直接修改值的 例如current++</h5>
        <p>{{Test.current}}</p>
        <hr/>
        <h5 @click="changeAll">批量修改State的值</h5>
        <p>{{Test.current}}</p>
        <p>{{Test.piniaName}}</p>
        <p>{{Test.PiniaObj}}</p>
        <hr/>
        <h5 @click="changeAllFn">批量修改函数形式</h5>
        <p>{{Test.current}}</p>
        <p>{{Test.piniaName}}</p>
        <p>{{Test.PiniaObj}}</p>
        <hr/>
        <h5 @click="changeObj">通过原始对象修改整个实例</h5>
        <p>{{Test.current}}</p>
        <p>{{Test.piniaName}}</p>
        <p>{{Test.PiniaObj}}</p>
        <hr/>
        <h5 @click="changeAct">通过actions修改</h5>
        <p>{{Test.current}}</p>
        <p>{{Test.piniaName}}</p>
        <p>{{Test.PiniaObj}}</p>
        <hr/>
        <h5 @click="changeAct">pinia中store结构</h5>
        <p @click="changeStoreFn1">直接结构失去响应式：{{current}}</p>
        <p @click="changeStoreFn2">storeToRefs解构具有响应式：{{piniaName}}</p>
        <hr/>
        <h5>Actions（支持同步异步）</h5>
        <hr/>
        <h5>getters:{{Test.newName}}----{{Test.newAge}}---{{Test.addGetter}}</h5>
        <hr>
        <h5>pinia一些API</h5>
        <p @click="resetStore">重置store到他的初始状态：.$reset</p>
    </div>

</template>
    
<script setup lang='ts'>
import { storeToRefs } from 'pinia';
import { useTsetStore } from '../store/pinia'
let Test = useTsetStore();
let change = () => {
    Test.current++;
};
// 在他的实例上有$patch方法可以批量修改多个值
let changeAll = () => {
    Test.$patch({
        current: 100,
        piniaName: 'pinia-all',
        PiniaObj: {
            age: 100
        }
    })
};


let changeAllFn = () => {
    Test.$patch((state) => {
        state.current--;
        state.piniaName = 'pinia-fn';
    })
};


// 通过原始对象修改整个实例
// $state您可以通过将store的属性设置为新对象来替换store的整个状态

// 缺点就是必须修改整个对象的所有属性

let changeObj = () => {
     Test.$state = {
        current:999,
        piniaName: 'pinia-all',
        PiniaObj: {
            age: 100
        }
    }    
};

let changeAct = () => {
     Test.setCurrent()   
};


// pinia中store结构
let {current} = Test;
let { piniaName } = storeToRefs(Test);


// pinia一些API----------------------------------->
// 1 $reset 重置store到他的初始状态
let resetStore = () => {
    console.log('resetStore-before:', Test);
    Test.$reset()
    console.log('resetStore-after:', Test);
};

// 2 订阅state的改变  类似于Vuex 的abscribe  只要有state 的变化就会走这个函数
Test.$subscribe((args,state)=>{
   console.log('$subscribe', args,state);
   
});

// 如果你的组件卸载之后还想继续调用请设置第二个参数
// Test.$subscribe((args,state)=>{
//    console.log(args,state);
   
// },{
//   detached:true
// });

// 3 订阅Actions的调用
Test.$onAction((ags) => {
    console.log('$onAction=>', ags);
});

</script>
    
<style>
    
</style>